<template>
  <div style="padding: 0 24px">
    <el-card style="width: 100%;margin-top: 0px;height: 800px">
      <div :style="height" id="div1">
        <el-row style="margin: 20px 0">
          <el-col span="6" class="col">
            <span >单据编号:</span>
            <el-input  style="width: 60%"  placeholder="请输入单据编号" ></el-input>
          </el-col>
          <el-col span="6">
            <span>商品信息:</span>
            <el-input  style="width: 60%" placeholder="请输入条码、名称、规格、型号"></el-input>
          </el-col >
          <el-col span="6" class="col">
            <span>单据日期:</span>
            <el-date-picker
                style="width: 60%"
                v-model="value1"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
            </el-date-picker>
          </el-col>
          <el-col span="6" class="col">
            <a style="line-height:38px;border-radius:4px;display:inline-block;
                  background-color:#1890ff;color:white;text-align:center;width:40px;
                  height:38px" href="/">查询</a>
            <a style="margin: 0 0 0 8px;display:inline-block;text-align:center;width:40px;
                  height:38px;border-radius:4px;border: 1px solid blue;line-height:38px;" href="/">重置</a>
            <a  @click="expand()" style="cursor: pointer;color: #1890ff">{{dj}}</a>
            <el-button style="background-color: white;padding-left:0;color: #1890ff;border: 0" :icon="dp">
            </el-button>
          </el-col>
        </el-row>


        <el-row style="margin: 24px 0">
          <el-col span="6" class="col">
            <span >  供应商:</span>
            <el-select style="width: 60%" v-model="value2">
              <el-option
                  v-for="item in options"
                  :key="item.value2"
                  :label="item.label2"
                  :value="item.value2">
              </el-option>
            </el-select>
          </el-col>
          <el-col span="6" class="col">
            <span>仓库名称:</span>
            <el-select style="width: 60%" v-model="value3">
              <el-option
                  v-for="item in options"
                  :key="item.value3"
                  :label="item.label3"
                  :value="item.value3">
              </el-option>
            </el-select>
          </el-col>
          <el-col span="6" class="col">
            <span>操作员:</span>
            <el-select style="width: 60%" v-model="value4">
              <el-option
                  v-for="item in options"
                  :key="item.value4"
                  :label="item.label4"
                  :value="item.value4">
              </el-option>
            </el-select>
          </el-col>
          <el-col span="6" class="col">
            <span style="margin-left: -13px">关联订单:</span>
            <el-input  style="width: 60%" placeholder="请输入关联订单"></el-input>
          </el-col >
        </el-row>


        <el-row style="margin: 24px 0">
          <el-col span="6" class="col">
            <span >结算账户:</span>
            <el-select style="width: 60%" v-model="value5">
              <el-option
                  v-for="item in options"
                  :key="item.value5"
                  :label="item.label5"
                  :value="item.value5">
              </el-option>
            </el-select>
          </el-col>


          <el-col span="6" class="col">
            <span>单据状态:</span>
            <el-select style="width: 60%" v-model="value6">
              <el-option
                  v-for="item in options"
                  :key="item.value6"
                  :label="item.label6"
                  :value="item.value6">
              </el-option>
            </el-select>
          </el-col>

          <el-col span="6" class="col">
            <span>单据备注:</span>
            <el-input  style="width: 60%" placeholder="请输入单据备注" ></el-input>

          </el-col>
        </el-row>
      </div>

      <el-row style="margin: 10px 0">
        <a href="" style="line-height:38px;border-radius:4px;display:inline-block;
                      background-color:#1890ff;color:white;text-align:center;width: 70px;height: 38px;
                      margin: 0 8px 8px 0;">+新增</a>
        <el-select style="width: 120px" v-model="value" placeholder="批量操作" >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :class="item.name"
          style="width: 120px ;height: auto">
          </el-option>
        </el-select>
      </el-row>


      <el-table
          :data="tableData"
          border
          style="width: 100%">

        <el-table-column width="60">
          <template>
            <!-- `checked` 为 true 或 false -->
            <el-checkbox v-model="checked">备选项</el-checkbox>
          </template>
        </el-table-column>

        <el-table-column
            prop="date"
            label="供应商"
            width="200">
        </el-table-column>
        <el-table-column
            prop="address"
            label="单据编号">
        </el-table-column>
        <el-table-column
            prop="address"
            label="商品信息">
        </el-table-column>
        <el-table-column
            prop="address"
            label="单据日期">
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作员">
        </el-table-column>
        <el-table-column
            prop="address"
            label="金额合计">
        </el-table-column>
        <el-table-column
            prop="address"
            label="合计含税">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
        </template>

<script>
export default {
  name: "PR",
  data() {
    return {
      checked: true,
      options: [{
        value: '选项1',
        label: '删除',
        name:'el-icon-coffee'

      },
        {
          value: '选项2',
          label: '审核',
          name:'el-icon-check'
        }, {
          value: '选项3',
          label: '反审核',
          name:'el-icon-refresh'
        },
        {
          value1: '',
          label1: ''
        },
        {
          value2: '',
          label2: ''
        },
        {
          value3: '',
          label3: ''
        },
        {
          value4: '',
          label4: ''
        },{
          value5: '',
          label5: ''
        },{
          value6: '',
          label6: ''
        }],
      value: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      height:'height: 200px',
      dj : '展开',
      dp : 'el-icon-arrow-down'
    }
  },methods:{
    expand(){
      if (this.height==='height: 200px'){
        this.height = 'height: 60px'
        this.dj = '展开'
        this.dp = 'el-icon-arrow-down'
      }else {
        this.height = 'height: 200px'
        this.dj = '收起'
        this.dp = 'el-icon-arrow-up'
      }
    }
  }

}
</script>

<style scoped>
  a {
    text-decoration: none;
    padding: 0 12px
  }
  .col{
    padding: 0 12px;
  }
  span{
    font-size: 14px;
    margin: 0 20px 0 0;
  }
  #div1{
    overflow: hidden;
  }

  a {
    text-decoration: none;
    padding: 0 12px
  }
  .col{
    padding: 0 12px;
  }
  span{
    font-size: 14px;
    margin: 0 20px 0 0;
  }
  #div1{
    overflow: hidden;
  }

</style>